<template>
  <div>
    <div class="title">
      <i class="icon-down"></i>
      <p>{{ listIndex }}<span>({{item.length}})</span></p>
      <i class="icon-setting"></i>
    </div>
    <div class="list-item"  @click="title(item.id)" v-for="(item) in listItems" >
      <img  :src="item.coverImgUrl">
      <div class="item-title" lin>
        <div class="name">
          <p>{{item.name}}</p>
          <p>{{item.trackCount}}首</p>
        </div>
        <div class="icon">
          <i class="icon-list-circle" @click.stop="icon()"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: "",
    props: {
        item:{
          type:Array,
          default:[]
        },
      index:{
          type:String,
          default:''
        }
    },
    data(){
      return {
        listItems:{},
        listIndex:"",
      }
    },
    computed:{
      items(){
        return this.listItems;
      }
    },
    methods:{
      icon(){
        console.log(this.listItems);
          console.log(111);
      },
      title(id){
        this.$router.push({
          path: '/list',
          query: {
            uid:id
          }

        });
      }
    },
    created() {
      this.listItems = this.item;
      this.listIndex = this.index === 'myCreate' ? '我创建的歌单':'收藏的歌单';
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../style/font-icon/style.css";
  @import '../../style/mixin.scss';

  .title{
    @include wh(100%,70px);
    @include fj(space-between,center);
    font-size: 23px;
    color: rgb(94,94,94);
    background-color:rgb(231, 233, 233);
  }
  .title .icon-down{
    font-size: 26px;
    padding: 14px 14px 14px 18px;
  }
  .title p{
    @include wh(100%,100%);
    @include fj(start,center);
  }
  .icon-setting{
    font-size: 30px;
    padding: 14px 40px 14px 14px;
  }
  .list-item{
    @include fj(space-between,center);
    @include wh(100%,110px);
    background-color: rgb(242,244,246);
    z-index: 9;
  }
  .list-item img{
    padding-left: 12px;
    padding-right: 30px;
    width: 100px;

  }
  .item-title{
    @include fj(space-between,center);
    @include wh(100%,108px);
    border-bottom: 2px solid  rgb(231, 233, 233);
  }

  .item-title p:first-child{
    @include wh(100%,35px);
    overflow: hidden;
    font-size: 28px;
    color: rgb(49,49,49);
    font-family: Tahoma;
    font-weight: 500;
    padding-top: 20px;
    margin-bottom: 10px;
  }
  .item-title p:nth-child(2){
    font-size: 20px;
    font-weight: 400;
    color: rgb(150, 150, 150);
  }
  .icon{
    @include wh(88px,inherit);
    @include fj(center,center)
  }
  .icon-list-circle{
    padding: 20px 28px 20px 10px;
    font-size: 30px;
    color:rgb(170, 171, 172);
    z-index: 10;
  }
</style>
